<template>
    <!--Play页面-->
    <div class="box">
        <div class="filter">
            <div class="top">
                <ul>
                    <li @mouseenter="hoverIndex=1" @mouseleave="hoverIndex=0" @click.stop="currIndex=1">
                        <div class="title-sub title" :class="{'title-click-active':currIndex==1}">5v5</div>
                        <div class="title-main title" :class="{'title-click-active':currIndex==1}">召唤师峡谷</div>
                    </li>
                    <li @mouseenter="hoverIndex=2" @mouseleave="hoverIndex=0" @click.stop="currIndex=2">
                        <div class="title-sub title" :class="{'title-click-active':currIndex==2}">5v5</div>
                        <div class="title-main title" :class="{'title-click-active':currIndex==2}">极地大乱斗</div>
                    </li>
                    <li @mouseenter="hoverIndex=3" @mouseleave="hoverIndex=0" @click.stop="currIndex=3">
                        <div class="title-sub title" :class="{'title-click-active':currIndex==3}">1v1v1v1v1v1v1v1</div>
                        <div class="title-main title" :class="{'title-click-active':currIndex==3}">云顶之弈</div>
                    </li>
                </ul>
            </div>
            <hr class="line">
            <div class="bottom">
                <ul>
                    <li>
                        <div class="introduce" 
                            :class="{'introduce-active':hoverIndex==1, 'introduce-click-active':currIndex==1}">
                            五人一队，在核心竞技模式中战胜对手并摧毁敌方水晶枢纽。
                            <hr class="line" style="margin-top: 20px">
                        </div>
                    </li>
                    <li>
                        <div class="introduce" 
                            :class="{'introduce-active':hoverIndex==2, 'introduce-click-active':currIndex==2}">
                            五人一队，在极地的窄桥上用随机到的英雄战胜对手并摧毁沿途的一切。
                            <hr class="line" style="margin-top: 20px">
                        </div>
                    </li>
                    <li>
                        <div class="introduce" 
                            :class="{'introduce-active':hoverIndex==3, 'introduce-click-active':currIndex==3}">
                            集结一个英雄小队为你作战，在于七位对手的轮番对战中坚持到仅存你一方为止。
                            <hr class="line" style="margin-top: 20px">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PlayWin',
    data(){
        return{
            //鼠标悬停的模式
            hoverIndex: 0,

            //目前选择的模式
            currIndex: 1,
        }
    }
}
</script>

<style scoped>

    .box{
        height: 100%; 
        width: 100%;
        background-image: url(https://game.gtimg.cn/images/lol/universe/v1/assets/bltfd0915f031011972-eyes-in-the-abyss.jpg);
        background-size: auto 100%;
    }

    .filter{
        height: 100%;
        width: 100%;
        background-image: radial-gradient(circle at 50% 65%, rgb(9, 14, 20, 0),rgb(11, 26, 27));
    }

    .line{
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(255, 255, 255, 0.4), rgba(0,0,0,0)) 20 20;
    }

    .top{
        width: 100%;
        height: 50%;
    }

    .bottom{
        width: 100%;
        height: 48%;
    }

    .top ul{
        margin-top: 21%;
        text-align: center;
        cursor: pointer;
    }

    .bottom ul{
        margin-bottom: 21%;
        margin-left: 110px;
    }

    .top ul li{
        float: left;
        margin-left: 15%;
    }

    .bottom ul li{
        float: left;
        margin-left: 3.5%;
    }

    .title{
        color: rgb(190, 179, 128);
    }

    .title-main{
        font-weight: 600;
        font-size: 32px;
    }

    .title-sub{
        font-weight: 600;
        font-size: 18px;
    }

    .introduce{
        opacity: 0;

        display: block;
        font-size: 18px;
        font-weight: 500;
        color: rgb(184, 178, 162);
        word-wrap:break-word;
        word-break:normal; 

        width: 300px;
    }

    .introduce-active{
        opacity: 1;
    }

    .introduce-click-active{
        opacity: 1;
        color: rgb(231, 228, 218);
    }

    .title-click-active{
        opacity: 1;
        color: rgb(236, 226, 181);
    }

    li:hover ~div{
        background-color: red;
    }
</style>